<template>
  <div
    class="
      w-full
      h-full
      flex flex-col
      items-center
      justify-around
      rounded-lg
      bg-myblue-900 bg-opacity-75
      overflow-x-hidden
    "
    style="
      height: calc(100vh - 16rem);
      background: rgb(0, 145, 167);
      background: linear-gradient(
        90deg,
        rgba(0, 145, 167, 0.8) 0%,
        rgba(0, 29, 43, 0.5) 100%
      );
    "
  >
    <template v-for="item in items" :key="item.id">
      <span class="my-4 text-white">{{ item.title }}</span>
      <image-icon class="-mt-6 w-36" :image="BorderImage" />
      <component
        :is="item.chart"
        title=""
        :data="item.data"
        :option="item.option"
        x-name="m"
        y-name="mm"
        class="max-h-1/3 h-1/3"
      />
    </template>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import LineChart from "../../components/chart/LineChart.vue";
import SimpleBarChart from "../../components/chart/SimpleBarChart.vue";
import PieChart from "../../components/chart/PieChart.vue";
import SimplePieChart from "../../components/chart/SimplePieChart.vue";
import ImageIcon from "../../components/icon/ImageIcon.vue";
import AreaChart from "../../components/chart/AreaChart.vue";
import FlowerChart from "../../components/chart/FlowerChart.vue";
import HorizontalBarChart from "../../components/chart/HorizontalBarChart.vue";
import RadarChart from "../../components/chart/RadarChart.vue";
import BorderImage from "../../assets/border.png";
import BarChart from "../chart/BarChart.vue";
import MultiLineChart from "../chart/MultiLineChart.vue";
import CurveChart from "../chart/CurveChart.vue";
import GradientBarChart from "../chart/GradientBarChart.vue";
import LineBarMixChart from "../chart/LineBarMixChart.vue";
import NestPieChart from "../chart/NestPieChart.vue";
import DataList from "./DataList.vue";

interface ChartItem {
  id: number;
  // 标题
  title: string;
  // 使用到的组件
  chart: string;
  // 数据
  data: any;
  // 自定义配置
  option?: any;
  // X轴名称
  xName?: string;
  // Y轴名称
  yName?: string;
}

export default defineComponent({
  props: {
    items: Array as PropType<ChartItem[]>,
  },
  components: {
    LineChart,
    SimpleBarChart,
    PieChart,
    SimplePieChart,
    ImageIcon,
    AreaChart,
    FlowerChart,
    RadarChart,
    HorizontalBarChart,
    BarChart,
    MultiLineChart,
    CurveChart,
    GradientBarChart,
    LineBarMixChart,
    NestPieChart,
    DataList,
  },
  setup() {
    return {
      BorderImage,
    };
  },
});
</script>
